<template>
  <el-form ref="question" :rules="rules" :model="question" label-width="100px">
    <el-form-item label="科目" prop="subjectId">
      <el-cascader :disabled="readonly" v-model="question.subjectId" :options="subjectOptions"
        @change="$emit('subject-change')"></el-cascader>
    </el-form-item>

    <el-form-item label="题目" prop="title" v-if="question.type != 6">
      <myEdit :disabled="readonly" v-model="question.title" @input="$emit('title-change', $event)" />
    </el-form-item>

    <el-form-item label="材料" v-if="question.type == 6" prop="materials">
      <myEdit :disabled="readonly" v-model="question.materials" placeholder="如果存在材料,需填写材料" />
    </el-form-item>

    <el-form-item label="题目类型">
      <el-select :disabled="readonly" v-model="question.type" size="mini" placeholder="请选择题目类型"
        @change="$emit('type-change')">
        <el-option v-for="(key, value) in questionType" :key="key" :label="key" :value="value" />
      </el-select>
    </el-form-item>

    <el-form-item label="题目类型别名">
      <el-input :disabled="readonly" v-model="question.alias" :placeholder="typeName" size="mini" />
    </el-form-item>

    <el-form-item label="题目分值">
      <el-input-number :disabled="readonly" :min="1" v-model="question.score" />
    </el-form-item>

    <template>
      <el-form-item label="是否真题">
        <el-switch :disabled="readonly" v-model="question.isOfficialQuestion" :active-value="1"
          :inactive-value="0" />
      </el-form-item>
      <el-form-item v-if="question.isOfficialQuestion" label="真题出处">
        <el-input :disabled="readonly" v-model="question.officialQuestionSource" placeholder="真题名称"
          size="mini" />
      </el-form-item>
      <el-form-item v-if="question.isOfficialQuestion" label="真题年份">
        <el-date-picker :disabled="readonly" v-model="question.year" size="mini" value-format="yyyy"
          type="year" placeholder="选择年份" />
      </el-form-item>
    </template>

    <el-form-item v-if="question.type === '4'" label="空格数量">
      <el-input-number :disabled="readonly" :min="1" v-model="question.blankSum" />
    </el-form-item>

    <el-form-item label="难易程度">
      <el-rate :disabled="readonly" v-model="question.difficultyLevel" />
    </el-form-item>
  </el-form>
</template>

<script>
import myEdit from "@/components/myEdit";

export default {
  name: "QuestionBasicForm",
  components: {
    myEdit
  },
  props: {
    question: {
      type: Object,
      required: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    subjectOptions: {
      type: Array,
      default: () => []
    },
    questionType: {
      type: Object,
      default: () => ({
        1: "单选题",
        2: "多选题",
        3: "判断题",
        4: "填空",
        5: "简答题",
        6: "材料题",
        7: "连线题",
      })
    },
    rules: {
      type: Object,
      default: () => ({
        subjectId: [{ required: true, message: "科目必填" }],
      })
    }
  },
  computed: {
    typeName() {
      return this.questionType[this.question.type];
    }
  },
  methods: {
    validate() {
      return this.$refs.question.validate();
    },
    resetFields() {
      this.$refs.question.resetFields();
    }
  }
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 18px !important;
}
</style>